
<template>
<!-- jinyt start 日期控制 -->
  <a-range-picker
    v-if="!readonly && this.isControlPharmacy"
    v-model="dates"
    format="YYYY-MM-DD HH:mm:ss"
    :show-time="{ format: 'HH:mm' }"
    :placeholder="['开始时间','结束时间']"
    style="width:100%"
    @change="onChange"
  ></a-range-picker>
<!-- end -->
  <a-range-picker
    v-else-if="!readonly"
    v-model="dates"
    :placeholder="['开始时间','结束时间']"
    style="width:100%"
    @change="onChange"
  ></a-range-picker>

  <div v-else>

    <template v-if="ctrl.value">
      <span>{{ ctrl.value[0] }}</span> ~ <span>{{ ctrl.value[1] }}</span>
    </template>

  </div>

</template>

<script lang="ts">

import { Subscription } from 'rxjs';

import moment from 'moment';

import { Component, Vue, Prop, Watch, Inject } from "vue-property-decorator";

import { DateOptions } from '../../typings';

import { DateInputControl } from '../../controls';

import { ControlPropertyChange,DateControl } from "h3-forms";

import {
  DatePicker
} from 'h3-antd-vue';


@Component({
  name: "input-date-range",
  components: {
    ARangePicker: DatePicker.RangePicker
  }
})
export default class InputDateRange extends DateInputControl {
  isControlPharmacy: Boolean = false;
  dates : moment.Moment[] = [];
  setDates(){
    if(this.ctrl && this.ctrl.value){
      this.dates = this.ctrl.value.map((s:string) => {
        if(s){
          return moment(s);
        }
        return s;
      });
    }else{
      this.dates = [];
    }
  }
  
  setControl() {
    this.setDates();
  }

  handleValueChange(value: any): void {
    this.setDates();
  }

  onChange(dates: moment.Moment[], dateStrings: string[]) {
    this.ctrl.value = dateStrings && dateStrings.length > 0 ? dateStrings : null;
  }

  mounted(){
    /**
     * jinyt start   && this.ctrl.id ==='drugsBuyDate'
     * 日期控制
     * 药店管控表单、诊所管控、零售药店购买
    */
    let applist = this.$route.path.split('/')[4];
    if( applist ==='controlPharmacy' || applist ==='zsgk' || applist ==='pharmacyBuyInfo'){
      this.isControlPharmacy = true;
    }
    //end
  }
}
</script>

<style lang="less" scoped>
</style>